/*
 * @Author: FanWeiHua
 * @Date: 2020-11-17 15:34:15
 * @LastEditTime: 2021-07-22 10:32:51
 * @Description: index.js
 */
import './index.less';
import { setLocaleData } from 'monaco-editor-nls';
import zhCN from 'monaco-editor-nls/locale/zh-hans.json';
setLocaleData(zhCN);
const monaco = require('monaco-editor/esm/vs/editor/editor.api');
/**
 * html内容
 */
const editorHtml = monaco.editor.create(document.getElementById('container-html'), {
  value: `<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=E4805d16520de693a3fe707cdc962045"></script>
    <title>设置地图3D视角</title>
  </head>
  <body>
    <div id="allmap"></div>
  </body>
</html>`,
  theme: 'vs-dark',
  language: 'html',
  automaticLayout: true
});
/**
 * css内容
 */
const editorCss = monaco.editor.create(document.getElementById('container-css'), {
  value: `body,
html,
#allmap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: '微软雅黑';
}`,
  theme: 'vs-dark',
  language: 'css',
  automaticLayout: true
});
/**
 * javascript内容
 */
const editorJavascript = monaco.editor.create(document.getElementById('container-js'), {
  value: `// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19);  // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setHeading(64.5);
map.setTilt(73);`,
  theme: 'vs-dark',
  language: 'javascript',
  automaticLayout: true
});
// monaco.editor.setModelLanguage(editor.getModel(), "javascript");
// 创建新的iframe
const creatNewIframe = () => {
  const frameDiv = document.getElementById('frameDiv');
  frameDiv.innerHTML = '';
  const iframe = document.createElement('iframe');
  iframe.style.width = '100%';
  iframe.style.height = '100%';
  iframe.style.border = '0px ';
  iframe.id = 'map';
  frameDiv.appendChild(iframe);
  return iframe.contentWindow.document;
};
// 执行map的demo初始化
const initMap = () => {
  const iframe = creatNewIframe();
  iframe.open();
  const html = editorHtml.getValue();
  const css = editorCss.getValue();
  const javascript = editorJavascript.getValue();
  const content = `${html}<style type="text/css">${css}</style><script type="text/javascript">${javascript}</script>`;
  iframe.write(content);
  iframe.close();
};
/**
 * 执行
 */
document.getElementById('run').onclick = () => {
  initMap();
};
/**
 * 所有选取元素
 */
const allElements = [
  { evId: 'container-html-event', opId: 'container-html' },
  { evId: 'container-css-event', opId: 'container-css' },
  { evId: 'container-js-event', opId: 'container-js' }
];
allElements.forEach(item => {
  /**
   * 显示、隐藏html编辑
   */
  document.getElementById(item.evId).onclick = e => {
    const current = document.getElementById(item.opId);
    if (item.hide) {
      const arHidState = allElements.filter(cItem => cItem.hide === true).length === 2;
      if (arHidState) {
        document.getElementById(item.opId).style.height = '48.5%';
        const ele = allElements.filter(cItem => !cItem.hide)[0];
        if (ele) document.getElementById(ele.opId).style.height = '48.5%';
        item.hide = false;
      } else {
        allElements.forEach(el => {
          el.hide = false;
          document.getElementById(el.opId).style.height = '33.3333%';
        });
      }
    } else {
      const arHidState = allElements.filter(cItem => cItem.hide).length === 2;
      if (arHidState) {
        return;
      }
      item.hide = true;
      current.style.height = '3%';
      allElements.forEach(cItem => {
        if (!cItem.hide) {
          const current = document.getElementById(cItem.opId);
          current.style.height = '48.5%';
        }
      });
      // // 如果有两个是隐藏的，则最后一个的要显示最大
      const hidState = allElements.filter(cItem => cItem.hide).length === 2;
      if (hidState) {
        const ele = allElements.filter(cItem => !cItem.hide)[0];
        if (ele) document.getElementById(ele.opId).style.height = '94%';
      }
    }
  };
});
/**
 * 初始化
 */
initMap();
